<template>
  <div id="app">
    <div id="nav">
      <!-- 声明式跳转方式  ---- 标签跳转 -->
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
      <!-- 编程式跳转  ---- js跳转方式 -->
      <button @click="changePage('/')">Home</button> |
      <button @click="changePage('/about')">About</button>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    changePage (url) {
      // 编程式跳转
      // 路由其实可以看作是一个数组，数组的元素就是每一次操作的每一个路由
      // push一次，相当于给数组的最后面添加了一个元素，指针指向新添加的最后一个元素
      // replace一次，相当于替换了数组的最后一个元素，指针的位置并没有发生改变
      // back一次，相当于删掉了最后一个元素（不是真的删除），指针指向了倒数第二个元素
      // go一次，可以传入number类型的数字，值为正数，标签前进几步，值为负数，相当于后退几步
      console.log(this.$router)
      // this.$router.push()
      // this.$router.replace()
      // this.$router.back()
      // this.$router.go()
      this.$router.push(url)
      // ？ 为什么可以直接在组件中通过this.$router 访问到路由的实例
      // Vue.use(VueRouter) new Vue({ router }) 相当于实际上把router添加到了Vue的原型上
    }
  }
}
</script>
<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>
